<template>
    <div class="wrap">
        <div class="page-head">
            <a-breadcrumb>
                <a-breadcrumb-item>{{ $t('whiteList.whiteList.60zenfbn7r40') }}</a-breadcrumb-item>
                <a-breadcrumb-item>{{ $t('whiteList.whiteList.60zenfbn97o0') }}</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <c-table-search :loading="form.loading" v-model:model="form.data" @refresh="getData">
            <a-col :span="8">
                <a-form-item field="keywords" :label="$t('device.device.60zedd3f1sg1')">
                    <a-input v-model="form.data.keywords" :placeholder="$t('device.device.60zedd3f1sg2')" />
                </a-form-item>
            </a-col>
            <template v-slot:refresh>
                <a-button type="outline" @click="refresh">
                    <template #icon>
                        <icon-loop />
                    </template>
                </a-button>
            </template>
            <template v-slot:add>
                <a-button type="primary" v-permission="['whiteList:add']" @click="form.create.show = true">
                    <template #icon>
                        <icon-plus />
                    </template>
                    {{ $t('whiteList.whiteList.60zenfbn9to0') }}
                </a-button>
            </template>
        </c-table-search>
        <div class="tableScroll">
            <c-table :list="form.list" :loading="form.loading" :count="form.count" v-model:data="form.data"
                @refresh="getData">
                <a-table-column :title="$t('whiteList.whiteList.60zenfbn9yg0')" :width="60">
                    <template #cell="{ rowIndex }">
                        {{ rowIndex + 1 }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('whiteList.whiteList.60zenfbn9yg1')" ellipsis tooltip :width="180">
                    <template #cell="{ record }">
                        {{ record.uavId ? useIdModelFormat(record.uavId).name : '-' }}
                    </template>
                </a-table-column>
                <a-table-column title="UASID" ellipsis tooltip :width="280">
                    <template #cell="{ record }">
                        {{ record.uavId ? record.uavId : '-' }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('whiteList.whiteList.60zenfbn9yg2')" ellipsis tooltip :width="120">
                    <template #cell="{ record }">
                        {{ record.uavNum ? record.uavNum : '暂无实名认证' }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('whiteList.whiteList.60zenfbn97o1')" ellipsis tooltip :width="120">
                    <template #cell="{ record }">
                        {{ record.customerName ? record.customerName : '-' }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('whiteList.whiteList.60zenfbn97o2')" ellipsis tooltip :width="120">
                    <template #cell="{ record }">
                        {{ record.suffix ? record.suffix : '-' }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('riskControl.riskControl.60zeizn0j3c0')" ellipsis tooltip :width="150">
                    <template #cell="{ record }">
                        <div class="color" :style="{ backgroundColor: record?.color }"></div>
                    </template>
                </a-table-column>
                <a-table-column :title="$t('whiteList.whiteList.60zenfbnanc1')" ellipsis tooltip :width="120">
                    <template #cell="{ record }">
                        {{ record.typeName ? record.typeName : '-' }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('whiteList.whiteList.60zenfbna3s0')" data-index="remark" ellipsis tooltip
                    :width="200">
                    <template #cell="{ record }">
                        {{ record.remark ? record.remark : '-' }}
                    </template>
                </a-table-column>
                <a-table-column :ellipsis="true" :title="$t('user.user.60zemoh0r300')" :width="240">
                    <template #cell="{ record }">
                        {{ record.createTime ? dayjs.unix(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('whiteList.whiteList.60zenfbna7k0')" fixed='right' :width="260">
                    <template #cell="{ record }">
                        <a-space>
                            <a-button type="text" v-permission="['whiteList:edit']" @click="handleUpdata(record)">{{
                                $t('whiteList.whiteList.60zenfbnacg0') }}</a-button>
                            <a-button type="text" v-permission="['whiteList:delete']" status="danger"
                                @click="handleDelete(record)">{{
                                    $t('whiteList.whiteList.60zenfbnagg0') }}</a-button>
                        </a-space>
                    </template>
                </a-table-column>
            </c-table>
            <Create @refresh="getData" v-model:show="form.create.show"></Create>
            <Updata @refresh="getData" v-model:show="form.update.show" v-model:data="form.update.data"></Updata>
        </div>
    </div>
</template>
<script lang='ts' setup>
const local = useLocal()
import { apiWhiteListList, apiWhiteListDelete } from '@/api/visual'
import { useIdModelFormat } from "@/hooks/comparison";
import dayjs from 'dayjs'
const Create = defineAsyncComponent(() => import('./components/create.vue'))
const Updata = defineAsyncComponent(() => import('./components/updata.vue'))
const emit = defineEmits(['refresh'])
const refresh = () => {
    emit('refresh')
}
const form = reactive({
    create: {
        loading: false,
        show: false,
    },
    update: {
        loading: false,
        show: false,
        data: {},
    },
    detail: {
        show: false,
        data: {},
    },
    // auths:[],
    // allAuths:[],
    data: {
        page: 1,
        pageSize: 10,
        keywords: '',
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    list: [],
    count: 0
})
// 白名单列表
const getData = async () => {
    form.loading = true
    const { code, data } = await apiWhiteListList({
        ...form.data,
        keywords: form.data.keywords,
    })
    form.loading = false
    if (code != 200) return;
    form.list = data.list
    form.count = data.total
}
// 编辑
const handleUpdata = (record: any) => {
    form.update.data = cloneDeep(record)
    form.update.show = true
}
// 删除
const handleDelete = async (record: any) => {
    useModal.warning({
        content: t('whiteList.whiteList.60zenfbnanc0'),
        onBeforeOk: async () => {
            const { code } = await apiWhiteListDelete({
                id: record.id
            })
            if (code != 200) return false;
            useMessage.success()
            getData()
            return true
        }
    })
}
onBeforeMount(() => {
    getData()
})
</script>

<style scoped lang="less">
.wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .pageHead {
        background-color: var(--color-menu-light-bg);
        padding: 10px;
        margin-bottom: 20px;
    }

    .tableScroll {
        flex: 1;
        overflow: auto;
        padding: 20px;
        background-color: var(--menu-bg-color);
        border-radius: 10px;
    }
}

.color {
    width: 30px;
    height: 30px;
    border-radius: 2px;
}
</style>